<template>
  <header class="header header-page-bg">
    <div class="container">
      <div class="header-page-content">
        <div class="row align-items-center">
          <div class="col-md-7">
            <div class="header-content">
              <h1>Blogs</h1>
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">
                    Blogs
                  </li>
                </ol>
              </nav>
            </div>
          </div>
          <div class="col-md-5 d-none d-md-block">
            <div
              class="header-content-image header-content-abs-image header-content-abs-image-lg"
            >
              <img
                :src="require('assets/images/inner-page-header/page-3.png')"
                alt="page"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- -->
  <section class="blog-section pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 pb-30">
          <div class="sidebar-item sidebar-search">
            <form>
              <input
                type="text"
                class="form-control"
                placeholder="Search blogs"
              />
              <button class="btn main-btn main-btn-secondary" type="submit">
                <i class="flaticon-search"></i>
              </button>
            </form>
          </div>
          <div class="sidebar-item">
            <h3>Our Categories</h3>
            <ul class="sidebar-list">
              <li>
                <a href="#">
                  All of the blogs
                  <span>122</span>
                </a>
              </li>
              <li>
                <a href="#">
                  Furniture design
                  <span>40</span>
                </a>
              </li>
              <li>
                <a href="#">
                  Business
                  <span>22</span>
                </a>
              </li>
              <li>
                <a href="#">
                  Furniture branding
                  <span>60</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="sidebar-item">
            <h3>Recent Posts</h3>
            <div class="sidebar-post">
              <div class="sidebar-post-item">
                <a href="single-blog.html">
                  <div class="sidebar-post-thumb">
                    <img
                      :src="require('assets/images/products/product-14.png')"
                      alt="product"
                    />
                  </div>
                  <div class="sidebar-post-content">
                    <h3>Comfortable Bed Prices Have Reduces To $990.0</h3>
                    <div class="blog-entry">Mar 03, 2021</div>
                  </div>
                </a>
              </div>
              <div class="sidebar-post-item">
                <a href="single-blog.html">
                  <div class="sidebar-post-thumb">
                    <img
                      :src="require('assets/images/products/product-6.png')"
                      alt="product"
                    />
                  </div>
                  <div class="sidebar-post-content">
                    <h3>Mini High Table Added On On This Spring 2020</h3>
                    <div class="blog-entry">Mar 02, 2021</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
          <div class="sidebar-item">
            <h3>Recent Tags</h3>
            <ul class="sidebar-tag">
              <li>
                <a href="#">Business</a>
              </li>
              <li>
                <a href="#">All</a>
              </li>
              <li>
                <a href="#">Brand</a>
              </li>
              <li>
                <a href="#">Design</a>
              </li>
              <li>
                <a href="#">Blogs</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-lg-9 pb-30">
          <div class="result-block">
            <h2>Our Blogs</h2>
            <p>(Showing <span>6</span> out of <span>122</span>)</p>
          </div>
          <div class="row">
            <div class="col-sm-6 col-lg-4 pb-30">
              <div class="blog-card blog-card-secondcolor">
                <div class="blog-card-thumb">
                  <a href="single-blog.html">
                    <img
                      :src="require('assets/images/blogs/blog-1.jpg')"
                      alt="blog"
                    />
                  </a>
                </div>
                <div class="blog-card-content">
                  <div class="blog-entry">Mar 03, 2021</div>
                  <h3>
                    <a href="single-blog.html"
                      >We Produce The Best And The Super Product For You
                    </a>
                  </h3>
                  <ul class="blog-card-action">
                    <li>
                      <i class="flaticon-visibility"></i>
                      12.2 K
                    </li>
                    <li>
                      <i class="flaticon-message"></i>
                      2.5 K
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-4 pb-30">
              <div class="blog-card blog-card-secondcolor">
                <div class="blog-card-thumb">
                  <a href="single-blog.html">
                    <img
                      :src="require('assets/images/blogs/blog-2.jpg')"
                      alt="blog"
                    />
                  </a>
                </div>
                <div class="blog-card-content">
                  <div class="blog-entry">Mar 02, 2021</div>
                  <h3>
                    <a href="single-blog.html"
                      >Global Organization Has To A Best Act On Market</a
                    >
                  </h3>
                  <ul class="blog-card-action">
                    <li>
                      <i class="flaticon-visibility"></i>
                      33.3 K
                    </li>
                    <li>
                      <i class="flaticon-message"></i>
                      4.5 K
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-4 pb-30">
              <div class="blog-card blog-card-secondcolor">
                <div class="blog-card-thumb">
                  <a href="single-blog.html">
                    <img
                      :src="require('assets/images/blogs/blog-3.jpg')"
                      alt="blog"
                    />
                  </a>
                </div>
                <div class="blog-card-content">
                  <div class="blog-entry">Mar 01, 2021</div>
                  <h3>
                    <a href="single-blog.html"
                      >Global Organization Has To A Best Act On Market</a
                    >
                  </h3>
                  <ul class="blog-card-action">
                    <li>
                      <i class="flaticon-visibility"></i>
                      25.6 K
                    </li>
                    <li>
                      <i class="flaticon-message"></i>
                      2.9 K
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-4 pb-30">
              <div class="blog-card blog-card-secondcolor">
                <div class="blog-card-thumb">
                  <a href="single-blog.html">
                    <img
                      :src="require('assets/images/blogs/blog-4.jpg')"
                      alt="blog"
                    />
                  </a>
                </div>
                <div class="blog-card-content">
                  <div class="blog-entry">Feb 28, 2021</div>
                  <h3>
                    <a href="single-blog.html"
                      >Thinking To Make A Dececnt Drawing Room</a
                    >
                  </h3>
                  <ul class="blog-card-action">
                    <li>
                      <i class="flaticon-visibility"></i>
                      23.2 K
                    </li>
                    <li>
                      <i class="flaticon-message"></i>
                      4.5 K
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-4 pb-30">
              <div class="blog-card blog-card-secondcolor">
                <div class="blog-card-thumb">
                  <a href="single-blog.html">
                    <img
                      :src="require('assets/images/blogs/blog-5.jpg')"
                      alt="blog"
                    />
                  </a>
                </div>
                <div class="blog-card-content">
                  <div class="blog-entry">Feb 27, 2021</div>
                  <h3>
                    <a href="single-blog.html"
                      >Top Ten Furniture Store For Your Relaxation</a
                    >
                  </h3>
                  <ul class="blog-card-action">
                    <li>
                      <i class="flaticon-visibility"></i>
                      12.4 K
                    </li>
                    <li>
                      <i class="flaticon-message"></i>
                      5.3 K
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-4 pb-30">
              <div class="blog-card blog-card-secondcolor">
                <div class="blog-card-thumb">
                  <a href="single-blog.html">
                    <img
                      :src="require('assets/images/blogs/blog-6.jpg')"
                      alt="blog"
                    />
                  </a>
                </div>
                <div class="blog-card-content">
                  <div class="blog-entry">Feb 26, 2021</div>
                  <h3>
                    <a href="single-blog.html"
                      >Perfect Decorated Sofa Which Is Very New</a
                    >
                  </h3>
                  <ul class="blog-card-action">
                    <li>
                      <i class="flaticon-visibility"></i>
                      14.6 K
                    </li>
                    <li>
                      <i class="flaticon-message"></i>
                      7.9 K
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <nav aria-label="Pagination">
            <ul class="pagination justify-content-center">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true"
                  ><i class="flaticon-back"></i
                ></a>
              </li>
              <li class="page-item active" aria-current="page">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">3</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#"><i class="flaticon-next"></i></a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const {} = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const methods = {};
</script>
<style lang="scss" scoped></style>
